import { history } from 'umi';
import React from 'react';
import { Tabbar, Card } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import { BrushO } from '@react-vant/icons';
import { Comment, Me, System } from '@icon-park/react';
import './msg.less';

const goDiscover = () => {
  history.push('/');
}
const goMsg = () => {
  history.push('/msg');
}
const goMy = () => {
  history.push('/my');
}
const goWithdraw = () => {
  history.push('/withdraw');
}

export default function Page() {
  const [name, setName] = React.useState('message')
  return (
    <div className='msg'>
      <h2 className='msg-title'>消息 <span className='clear'><BrushO />清除未读</span></h2>
      <div className='container'>
        <div className='msg-time'>2024-06-18 20:28:15</div>
        <Card className='msg-item' round>
          <Card.Header border><span className='unread'></span>接单提醒</Card.Header>
          <Card.Body className='msg-body'>
            已有客户成功下单，请及时联系客服。<br />
            <span>订单编号：20240618202808778</span>
          </Card.Body>
          <Card.Footer className='msg-link' border>
            联系客服
          </Card.Footer>
        </Card>
        <div className='msg-time'>2024-06-17 20:28:15</div>
        <Card className='msg-item' round>
          <Card.Header border>提现成功</Card.Header>
          <Card.Body className='msg-body'>
            您已成功提现，请注意查收。<br />
            <span>订单编号：w20240617202808738</span>
          </Card.Body>
        </Card>
        <div className='msg-time'>2024-06-17 20:28:15</div>
        <Card className='msg-item' round>
          <Card.Header border>下单成功</Card.Header>
          <Card.Body className='msg-body'>
            您已成功下单，请联系客服继续为您服务。<br />
            <span>订单编号：w20240617202808738</span>
          </Card.Body>
          <Card.Footer className='msg-link' border>
            联系客服
          </Card.Footer>
        </Card>
        <div className='msg-time'>2024-06-17 20:28:15</div>
        <Card className='msg-item' round>
          <Card.Header border>陪玩分佣完成</Card.Header>
          <Card.Body className='msg-body'>
            您的接单已完成，陪玩佣金已计入您的余额。<br />
            <span>订单编号：w20240617202808738</span>
          </Card.Body>
          <Card.Footer className='msg-link' border onClick={goWithdraw}>
            立即提现
          </Card.Footer>
        </Card>
        <div className='msg-time'>2024-06-17 20:28:15</div>
        <Card className='msg-item' round>
          <Card.Header border>营销分佣完成</Card.Header>
          <Card.Body className='msg-body'>
            您的推广订单已完成，营销佣金已计入您的余额。<br />
            <span>订单编号：w20240617202808738</span>
          </Card.Body>
          <Card.Footer className='msg-link' border onClick={goWithdraw}>
            立即提现
          </Card.Footer>
        </Card>
      </div>
      <Tabbar value={name} onChange={v => setName(v as string)} className='tabbar' activeColor='#8c57ff' placeholder>
        <Tabbar.Item name='discover' icon={<System theme='outline' size='24' />} onClick={goDiscover}>发现</Tabbar.Item>
        <Tabbar.Item name='message' icon={<Comment theme='outline' size='24' />} onClick={goMsg}>消息</Tabbar.Item>
        <Tabbar.Item name='my' icon={<Me theme='outline' size='24' />} onClick={goMy}>我的</Tabbar.Item>
      </Tabbar>
      <SafeArea position='bottom' />
    </div>
  );
}
